<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Brand Page</h1>
    <form>
        <input type="text" name="name">
        <input type="button" value="Search" onclick="doQueryBrands()">
        <input type="button" value="Add" onclick="doAddUI()">
    </form>
    <table>
        <!--thead用于定义table中的列标题部分-->
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>operation</th>
        </tr>
        </thead>
        <!--tbody用于定义table中的表体部分-->
        <tbody>
        <tr th:each="brand:${list}">
            <td th:text="${brand.id}"></td>
            <td th:text="${brand.name}"></td>
            <td th:text="${brand.remark}"></td>
            <td th:text="${brand.createdTime}"></td>
            <td>
                <button type="button" th:onclick="doDeleteById([[${brand.id}]])">delete</button>
                    <button type="button" th:onclick="doFindById([[${brand.id}]])">update</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function doAddUI(){
        location.href=`http://localhost/brand/doAddUI`;
    }
    function doFindById(id){
        location.href=`http://localhost/brand/doFindById/${id}`;
    }
    function doDeleteById(id){
        location.href=`http://localhost/brand/doDeleteById/${id}`;
    }
    function doQueryBrands(){
        console.log("===doQueryBrands()==");
        //获取表单输入的品牌名称
        let name=document.forms[0].name.value;
        //访问服务端指定的url
        location.href=`http://localhost/brand/doFindBrands/${name}`;
        //如上语句中使用到了js中的模板字符串，其语法为`字符串`,在反引号内部
        //还可以使用${}表达式获取变量的值
    }
</script>
</body>
<html>